import React, { useCallback, useState, useEffect } from 'react';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from '@ant-design/icons';
import { Layout, Menu, theme } from 'antd';
import { Outlet } from 'react-router-dom'
import { Space, Table, Tag } from 'antd';
import type { TableProps } from 'antd';
import http from './api/http'
// import type { FormProps } from 'antd';
import { Button, Select, Form, Input } from 'antd';

const { Header, Sider, Content } = Layout;

const App: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
  }

  const [list, setList] = useState([])
  const [total, setTotal] = useState(0)
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(10)

  const featchList = useCallback(async () => {
    const res = await http.get('/article/list', {
      params: {
        page, pageSize
      }
    })
    console.log(res)
    setTotal(res.data.count)
    setList(res.data.rows)
  }, [])

  useEffect(() => {
    featchList()
  }, [])

  const columns: TableProps<DataType>['columns'] = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '更新时间',
      dataIndex: 'updatedAt',
      key: 'updatedAt',
    },
    {
      title: '内容',
      dataIndex: 'content',
      key: 'content',
    },
    {
      title: '操作',
      key: 'tags',
      dataIndex: 'tags',
      render: (_, { tags }) => (
        <>
          {tags.map((tag) => {
            let color = tag.length > 5 ? 'geekblue' : 'green';
            if (tag.name === 'loser') {
              color = 'volcano';
            }
            return (
              <Tag color={color} key={tag.name}>
                {tag.name.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
    {
      title: 'Action',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button>查看</Button>
          <Button>编辑</Button>
          <Button>删除</Button>
        </Space>
      ),
    },
  ];

  type FieldType = {
    username?: string;
    password?: string;
    remember?: string;
  };


  return (
    <Layout style={{ height: '100vh' }}>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="demo-logo-vertical" />
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['1']}
          items={[
            {
              key: '1',
              icon: <UserOutlined />,
              label: 'nav 1',
            },
            {
              key: '2',
              icon: <VideoCameraOutlined />,
              label: 'nav 2',
            },
            {
              key: '3',
              icon: <UploadOutlined />,
              label: 'nav 3',
            },
          ]}
        />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }}>

          <Form
            name="basic"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            style={{ maxWidth: 1600, display: 'flex' }}
            initialValues={{ remember: true }}
            // onFinish={onFinish}
            // onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item<FieldType>
              label="资产编码"
            >
              <Input />
            </Form.Item>

            <Form.Item<FieldType>
              label="资产名称"
            >
              <Input />
            </Form.Item>

            <Form.Item<FieldType>
              label="资产类别"
            >
              <Select
                defaultValue="请选择资产类别"
                style={{ width: 140 }}
                options={[
                  { value: '类别1', label: '类别1' },
                  { value: '类别2', label: '类别2' },
                  { value: '类别3', label: '类别3' },
                ]}
              />
            </Form.Item>

            <Form.Item<FieldType>
              label="资产状态"
            >
              <Select
                defaultValue="请选择资产状态"
                style={{ width: 140 }}
                options={[
                  { value: '状态1', label: '状态1' },
                  { value: '状态2', label: '状态2' },
                  { value: '状态3', label: '状态3' },
                ]}
              />
            </Form.Item>

            <Form.Item label={null}>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
            </Form.Item>

            <Form.Item label={null}>
              <Button type='default'>
                重置
              </Button>
            </Form.Item>

          </Form>
        </Header>
        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
          }}
        >
          <Outlet></Outlet>
          <Table<DataType>
            columns={columns}
            dataSource={list}
            pagination={{
              total: total,
              showSizeChanger: true,
              showQuickJumper: true,
              showTotal: (total) => `共有 ${total} 条`
            }}
          />
        </Content>
      </Layout>
    </Layout>
  );
};

export default App;